<!DOCTYPE html>
<html lang="zh"><head translate="no">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		
		<link href="./icon.png" rel="shortcut icon">
		<link href="./style.css" rel="stylesheet">
		<link href="./icon.png" rel="icon">
		
		<style>
			.url_item {
				width: calc(100% - 2*16px);
				font-size:18px;
				overflow:hidden;
				padding:8px 16px;
				cursor:pointer;
				color:#FFF;
			}
			
			a {
				text-decoration:none;
			}
			
			.url_item:hover,
			.url_item:active {
				background: rgba(1,1,1,0.5);
			}
			
			#nameipt {
				outline: none;
				border: 2px solid #CCC; 
				border-radius: 5px;
				padding: 5px 10px;
				width: calc(100% - 60px - 80%);
				font-size: 18px;
				margin: 3px;
				min-width: 100px;
			}
			#urlipt {
				outline: none;
				border: 2px solid #CCC; 
				border-radius: 5px;
				padding: 5px 10px;
				width: calc(100% - 60px - 3*2px - 40%);
				font-size: 18px;
				margin: 3px;
				min-width:240px;
			}
			#allsbmt {
				outline: none;
				margin: 3px;
				border-radius: 5px;
				background:#dd7000;
				color: #FFF;
				border: 2px solid rgba(255, 255, 255, 0.3); 
				padding: 5px 10px;
				width: calc(80px);
				font-size: 18px;
			}
		</style>
		
		<title>HLS Station | MiNAS</title>
	</head>
	<body>
		<!--Office Logo-->
		<img src="./icon.png" title="HLS Station" class="TitleBarIcon" onclick="location.href='./?'">
		
		<!--Title Bar-->
		<table class="TitleBar"><tbody><tr>
			<td width="35px"></td>
			<td align="left"><label translate="no">HLS Station</label></td>
		</tr></tbody></table>
		
		<input type="button" value="DEL" title="清除列表" id="TitleBarMenuBtn" class="TitleBarMenuBtn">
		
		<script>
			function request(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return decodeURIComponent(r[2]);
				return "";
			}
			function ajax(url, func){
				var xhttp = null; if (window.XMLHttpRequest){ xhttp = new XMLHttpRequest(); } else if (window.ActiveXObject){ xhttp = new ActiveXObject('Microsoft.XMLHTTP'); }
				xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { func(this.responseText); }
													   else if (this.readyState == 4 && this.status == 404) { func(""); } };
				xhttp.open("GET", url, true); xhttp.send();
			}
		</script>
		
		<!--列表显示容器-->
		<center>
			<div style="width:65%;min-width:350px;margin-top:50px;">
				<input type="text" id="nameipt" placeholder="名称"/>
				<input type="text" id="urlipt" placeholder="链接"/>
				<input type="button" id="allsbmt" value="添加"/>
			</div>
			<div id="container" style="width:65%;min-width:300px;text-align:left;"></div>
		</center>
		
		<script>
			window.onload = function() {
				
				
				function init(){
					ajax("./savelist.php?",
						function(data){
							try {
								let cont = document.getElementById("container");
								data += "]";
								data = data.replace(",]", "");
								data = eval("([" + data + "])");
								cont.innerHTML = "";
								for(let i = 0; i < data.length; i ++) {
									cont.innerHTML += "<a href='./?url=" + encodeURI(data[i].url) + "'><div class='url_item'>" + data[i].name + " | " + data[i].url + "</div></a>";
								}
							} catch(e) {
								console.log("Warning: Text File Empty, caused error when trans. to json");
								ajax("./savelist.php?write=",function(a){});
							}
						}
					);
				}
				function save(url, name) {
					ajax("./savelist.php",function(data){
						data += '{"name":"' + name + '","url":"' + url + '"},';
						ajax("./savelist.php?write=" + encodeURI(data),function(b){
							init();
						});
					});
				}
				function clear(func) {
					ajax("./savelist.php?write=%20",function(a){ func(); });
				}
				
				init();
				
				
				TitleBarMenuBtn = document.getElementById("TitleBarMenuBtn");
				allsbmt = document.getElementById("allsbmt");
				
				TitleBarMenuBtn.onclick = function() {
					function randomRange(min, max) {
						return Math.floor(Math.random() * (max - min)) + min;
					}
					let l = randomRange(2, 15);
					let r = randomRange(2, 15);
					let a = prompt("【清除列表】输入“ " + l + "+" + r + " ”的答案以删除");
					if (a != "" && a != null) {
						if (a == l + "+" + r) {
							alert("【傻逼】答案不正确，未清除列表");
						} else if (a != l + r) {
							alert("【失败】答案不正确，未清除列表");
						} else if (a == l + r) {
							alert("【成功】答案正确，已清除列表");
							clear(function(){ document.getElementById("container").innerHTML = ""; });
						}
					}
				}
				
				allsbmt.onclick = function() {
					let a = document.getElementById("nameipt");
					let b = document.getElementById("urlipt");
					if (a.value == "" || b.value == "") { return; }
					save(b.value, a.value);
					a.value = ""; b.value = "";
				}
			}
		</script>
</body></html>